<template>
    <div class="topnav">
        <router-link to="/" class="logo">
            <svg class="logo-icon">
                <use xlink:href="#icon-wheel"></use>
            </svg>
        </router-link>
        <ul class="menu">
            <li>
                <router-link to="/doc">文档</router-link>
            </li>
        </ul>
        <svg v-if="toggleMenuButtonVisible" class="toggle-aside" @click="toggleMenu">
            <use xlink:href="#icon-menu"></use>
        </svg>
    </div>
</template>

<script lang="ts">
    import { inject, Ref } from 'vue';

    export default {
        props: {
            toggleMenuButtonVisible: {
                type: Boolean,
                default: false
            }
        },
        setup(){
            const asideVisible = inject<Ref<boolean>>('asideVisible');  // get asideVisible

            const toggleMenu = () => {
                asideVisible.value = !asideVisible.value;
            }

            return { toggleMenu }
        }
    }
</script>

<style lang="scss" scope>

    $color: #007974;

    .topnav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 16px;
        color: $color;
        background: #6bc8c0;
        z-index: 20;

        > .logo {
            max-width: 6em;
            margin-right: auto;

            > .logo-icon {
                width: 32px;
                height: 32px;
            }
        }

        > .menu {
           
            > li {
                margin: 0 1em;
            }
        }

        > .toggle-aside {
            width: 32px;
            height: 32px;
            position: absolute;
            top: 50%;
            left: 16px;
            transform: translateY(-50%);
        }
    }

    @media (max-width: 500px) {
        .menu {
            display: none;
        }

        .logo {
            margin: 0 auto;
        }

        .toggle-aside {
            display: inline-block;
        }
    }

    @media (min-width: 500px) {
        .menu {
            display: flex;
            flex-wrap: nowrap;
            white-space: nowrap;
        }

        .toggle-aside {
            display: none;
        }
    }
</style>